<template>
  <div class="orderdetail">
    <van-nav-bar title="下单" left-arrow @click-left="onClickLeft" />
    <div class="orderdetail-box">
      <div class="select-address">
        <div class="selecyor-title" @click="showPopup">
          选择地址 <van-icon name="plus" />
        </div>
        <div>{{ name }} {{ phone }}</div>
        <div>{{ detailAddress }}</div>
      </div>
      <div class="payment">
        <div>支付方式</div>
        <div>在线支付<van-icon name="arrow" /></div>
      </div>
      <div class="shop-item-box">
        <div class="shop-img">
          <div class="img-box">
            <img
              class="auto-img"
              :src="'//elm.cangdu.org/img/' + shopImg"
              alt=""
            />
          </div>
          <div>{{ shopNanme }}</div>
        </div>
        <div class="list-shop">
          <div class="item" v-for="(item, index) in shopData" :key="index">
            <div>{{ item.name }}</div>
            <div>
              x{{ item.num }} <span class="price">&yen;{{ item.price }}</span>
            </div>
          </div>
          <div class="item">
            <div>餐盒</div>
            <div>&yen;60</div>
          </div>
          <div class="item">
            <div>配送费</div>
            <div>&yen;4</div>
          </div>
        </div>
      </div>
      <div class="price-item item">
        <div>待支付&yen;{{ total }}</div>
        <div class="place-order" @click="setOrder">确认下单</div>
      </div>
    </div>

    <van-popup
      v-model:show="show"
      closeable
      position="bottom"
      :style="{ height: '70%' }"
    >
      <!-- 搜索详细地址 -->
      <div class="eject">
        <ul class="eject-list">
          <li
            v-for="(item, index) in list"
            :key="index"
            @click="getDetail(item.name)"
          >
            <div>{{ item.name }}</div>
            <div>{{ item.address }}</div>
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

import { useRoute } from "vue-router";
import { showToast } from "vant";
import axios from "axios";

export default defineComponent({
  name: "Orderdetail",
  setup() {
    // 弹出层
    const show = ref(false);
    let name = ref("");
    let phone = ref("");
    let detailAddress = ref("");

    // 数据
    // 店名
    let shopNanme = ref("");
    let shopImg = ref("");
    let shopData = ref<Array<any>>([]);
    // 总价
    let total = ref(0);

    let route: any = useRoute();
    // 传入参数
    let strId: number = Number(route.query.id);

    let shopList: any = localStorage.getItem("shopCart");
    shopList = JSON.parse(shopList);

    for (let i = 0; i < shopList.length; i++) {
      if (shopList[i].shopsId === strId) {
        shopNanme.value = shopList[i].shopsImg;
        shopImg.value = shopList[i].shopsName;
        shopData.value = shopList[i].shops;
        for (let j = 0; j < shopList[i].shops.length; j++) {
          total.value += shopList[i].shops[j].num * shopList[i].shops[j].price;
        }
      }
    }
    total.value += 64;
    // console.log('shopData.value==>',shopData.value);
    // console.log('total.value==>',total.value);

    // 用户id
    let userId: number = 76942;

    let list = ref<Array<any>>([]);

    // 返回上一页
    const onClickLeft = () => history.back();

    // 选择地址
    let getDetail: (val: any) => void = (val: any): void => {
      // console.log('val==>',val);
      for (let i = 0; i < list.value.length; i++) {
        if (val === list.value[i].name) {
          // console.log('相同');
          name.value = list.value[i].name;
          phone.value = list.value[i].phone;
          detailAddress.value = list.value[i].address_detail;
        }
      }
    };

    // 获取收货地址
    let getAddress: () => void = (): void => {
      axios({
        method: "get",
        url: `https://elm.cangdu.org/v1/users/${userId}/addresses`,
      })
        .then((res) => {
          // console.log('res==>',res);
          list.value = res.data;
          // console.log('list==>',list);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    };

    // 下单
    let setOrder: () => void = (): void => {
      if (detailAddress.value === "") {
        showToast('请先选择地址')
        return;
      }
      // 日期
      let date = new Date();

      let shop: any = {
        id: strId,
        dataTime: `${date.getFullYear()}-${
          date.getMonth() + 1
        }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`,
        shopName: shopNanme.value,
        shopImg: shopImg.value,
        shopData: shopData.value,
        total: total.value,
      };

      // console.log('shop==>',shop);

            for (let i = 0; i < shopList.length; i++) {
                if (shopList[i].shopsId === strId) {
                    shopList[i].shops = [];
                }
            }
            // console.log('shopList==>',shopList);
            localStorage.setItem("shopCart", JSON.stringify(shopList));
            
            
            
            // 下单
            let shopbaglist: any = localStorage.getItem("shopbaglist");
            if (shopbaglist) {
                shopbaglist = JSON.parse(shopbaglist);
            } else {
                shopbaglist = [];
            }
            shopbaglist.push({ ...shop });
            // console.log('shopbaglist==>',shopbaglist);
            localStorage.setItem("shopbaglist", JSON.stringify(shopbaglist));

      // 返回
      onClickLeft();
    };

    // 弹出层
    const showPopup = () => {
      show.value = true;
    };

    onMounted((): void => {
      //获取查询参数
      getAddress();
    });
    return {
      list,
      show,
      name,
      phone,
      detailAddress,
      shopData,
      shopNanme,
      shopImg,
      total,

      onClickLeft,
      getAddress,
      showPopup,
      getDetail,
      setOrder,
    };
  },
});
</script>

<style lang="scss" scoped>
.price-item {
  background-color: #fff;
  padding: 10px 5px;
  box-sizing: border-box;
}

.shop-item-box {
  padding: 5px;
  box-sizing: border-box;
  background-color: #fff;
  margin: 10px 0;
}

.place-order {
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  background-color: #31e84f;
}

.price {
  display: inline-block;
  color: #f00;
  margin-left: 10px;
}

.shop-img {
  display: flex;
  align-items: center;
}

.img-box {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.auto-img {
  width: 100%;
  display: block;
}

.selecyor-title {
  font-size: 16px;
  color: #333;
}

.select-address {
  background-color: #fff;
  box-sizing: border-box;
  padding: 5px;
  height: 100px;
}

.payment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #555;
  background-color: #fff;
  padding: 10px 5px;
  margin: 10px 0;
  box-sizing: border-box;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.orderdetail-box {
  width: 100%;
  padding: 10px 10px 260px 10px;
  font-size: 14px;
  line-height: 28px;
  background-color: #eee;
  box-sizing: border-box;
}

.eject-list {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;

  li {
    width: 100%;
    border-bottom: 2px solid #ccc;
    margin-bottom: 5px;
  }
}

.eject {
  margin-top: 30px;
}

::v-deep .van-nav-bar__content {
  background-color: #3190e8;
}

::v-deep .van-nav-bar__title {
  color: #ffffff;
  font-size: 18px;
  font-weight: normal;
}

::v-deep .van-nav-bar .van-icon {
  color: #ffffff;
  font-size: 22px;
}

::v-deep .van-hairline--bottom::after {
  border-bottom-width: 0;
}
</style>